<template>
  <div class="mask" v-if="isShowCart && calculations.total" @click="mask"></div>
  <div class="cart">
        <ProductConent :shopList="calculations.productListItem" :iscartIcon="iscartIcon" v-if="isShowCart && calculations.total"/>
      <div class="cart__check">
          <div class="cart__check__icon">
              <img
              src="http://www.dell-lee.com/imgs/vue3/basket.png"
              alt="jpg"
              class="cart__check__icon__img"
              @click="showCartClick"
              >
              <div class="cart__check__icon__num" v-if="calculations.total ? true : false">{{ calculations.total }}</div>
          </div>
          <div class="cart__check__info">
              <span class="cart__check__info__total">{{calculations.total == 0 ? '购物车是空的' : '总计:'}}</span>
              <span class="cart__check__info__sum" v-if="calculations.total == 0 ? false : true">&yen; {{ calculations.price }}</span>
          </div>
          <div v-if="calculations.total > 0">
            <router-link :to="{path:`/confirmOrder/${shopId}`}">
              <div class="cart__check__btn">
                  去结算
              </div>
            </router-link>
          </div>
      </div>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import ProductConent from '../shopConent/productConent/ProductConent.vue'
import { useCommonCartEffect } from '../../../effects/cartEffects'

// 计算相关 商品数量加减 价格 商品列表获取
const computedContentFn = (shopId, showCart) => {
  const { productList } = useCommonCartEffect(shopId)
  const calculations = computed(() => {
    const productListItem = productList.value
    const dataObject = { total: 0, price: 0 }
    if (productListItem) {
      let i = ''
      for (i in productListItem) {
        const product = productListItem[i]
        dataObject.total += product.count
        if (product.iconCheck) {
          dataObject.price += product.count * product.price
        }
      }
      dataObject.price = dataObject.price.toFixed(2)

      // 将商品数量保存到本地缓存
      localStorage.cartTotal = dataObject.total
      if (dataObject.total === 0) {
        showCart.value = false
      }
    }
    const { total, price } = dataObject
    return { total, price, productListItem }
  })
  return { calculations }
}

// 购物车展示和隐藏
const showCartFn = () => {
  const isShowCart = ref(false)
  const showCartClick = () => {
    if (localStorage.cartTotal <= 0) {
      alert('请先添加商品')
      return false
    }
    isShowCart.value = !isShowCart.value
  }
  const mask = () => {
    isShowCart.value = false
  }
  return { showCartClick, isShowCart, mask }
}

export default {
  name: 'Cart',
  components: { ProductConent },
  data () {
    return {
      iscartIcon: true
    }
  },
  setup () {
    const route = useRoute()
    const shopId = route.params.id

    const { showCartClick, isShowCart, mask } = showCartFn()

    const { calculations } = computedContentFn(shopId, isShowCart)

    return { calculations, showCartClick, mask, isShowCart, shopId }
  }
}
</script>

<style lang="scss">
@import '../../../style/colorValue.scss';
.mask {
  position: fixed;
  right:0;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.50);
  z-index: 1;
}
.cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: $whiteColor;
    .Shopconent__conent {
      background: $whiteColor;
      width: 100%;
      height: 100%;
      &__tliteTop {
        height: .52rem;
        background: $whiteColor;
        padding: 0 .18rem;
        border-bottom: .01rem solid $deepWhiteColor;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__allCheckicon {
          display: flex;
          align-items: center;
          &__checkicon {
            font-size: .2rem;
            color: #0091FF;
          }
          &__allCheck {
            padding-left: .09rem;
            font-size: .14rem;
            color: $TextColor;
          }
        }
        &__clearCart {
          font-size: .14rem;
          color: $TextColor;
        }
      }
      &__ul {
        width: 100%;
        height: 100%;
        margin: 0;
        &__item {
          width: 100%;
          border-bottom: 0;
          margin-bottom: 0;
          padding-bottom: .16rem;
          &__tick {
            font-size: .2rem;
            color: $blueColor;
            line-height: .68rem;
            margin:0 .16rem 0 .18rem;
          }
          &__count {
            width: .95rem;
            margin-left: .22rem;
            &__num {
              width: auto;
              padding-bottom: .03rem;
            }
          }
        }
        &__item:last-child {
          padding-bottom: .16rem;
          margin-bottom: 0;
        }
        &__item:first-child {
          padding-top: .16rem;
        }
      }
    }
    &__check {
        display: flex;
        justify-content: space-between;
        height: .49rem;
        border-top: .01rem solid $deepWhiteColor;
        line-height: .49rem;
        &__icon {
            width: .84rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            &__img {
                width: .28rem;
                height: .26rem;
            }
            &__num {
                position: absolute;
                top: .02rem;
                left: .46rem;
                min-width: .2rem;
                height: .2rem;
                transform: scale(.5);
                transform-origin: left center;
                border-radius: .1rem;
                color:$whiteColor;
                display: flex;
                font-size: .12rem;
                justify-content: center;
                align-items: center;
                background: $redColor;
            }
        }
        &__info {
            flex:1;
            &__total {
                font-size: .12rem;
                color: $TextColor;
                display: inline-block;
            }
            &__sum {
                font-size: .18rem;
                color: $redColor;
                font-weight: bold;
                padding-left: .1rem;
            }
        }
        a {
          text-decoration: none;
          .cart__check__btn {
            width: .98rem;
            height: 100%;
            background: #4FB0F9;
            color:$whiteColor;
            font-size: .14rem;
            text-align: center;
            text-decoration: none;
          }
        }
    }
}
</style>
